﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>个人中心首页</title>
    <link th:href="@{/static/css/public.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/static/css/user.css}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" th:src="@{/static/js/jquery-1.3.2.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/html5.js}"></script>
</head>
<body>
<!--header-->
<header class="header">
    <!--topBar-->
    <div class="topBar">
        <div class="layout"> <span class="hello-notice f-orange1 f-b" style="position:absolute;left:50%;margin-left:-600px;top:1px;display:block;font-size:14px;text-align:left;">本商城在试运行阶段，暂不接收任何订单。</span>
            <!--welcome-->
            <span class="topBar-userWelcome" th:if="${session.sessionUser == null}">您好，欢迎来商城！<a th:href="@{/portal/toLogin.do}" id="loginHref" rel="popbox">[登录]</a> <a id="registerHref" th:href="@{/portal/toLogin.do}">[注册]</a></span>
            <!--登录后   -->
            <span class="topBar-userWelcome logined" th:if="${session.sessionUser != null}" th:onshow="true">
                欢迎您
                <span class="user">
                  <a href="#" class="user-link" th:text="${session.sessionUser}"><em class="icon-arr"></em></a>
                  <span class="user-cs" style="display:none;">
                    <span class="user-cs-con">
                      <s class="icon-arr"></s>
                      <p><a th:href="@{/user/toUserCenter.do}">个人中心</a></p>
                      <p><a href="#">退出登录</a></p>
                    </span>
                  </span>
                </span>
              </span>

            <script>
                $(function(){
                    $(".user").hover(function(){
                        $(this).find(".user-cs").show();
                    },function(){
                        $(this).find(".user-cs").hide();
                    });
                });
            </script>

            <!--//welcome-->
            <!--topBar-menu-->
            <span class="topBar-menu"> <a href="#">商户入驻申请</a>| <a href="#">我的订单</a>| <a href="#">网上营业厅</a> </span>
            <!--//topBar-menu-->
        </div>
    </div>
    <!--//topBar-->
  <!--headerMain-->
  <div class="headerMain layout clearfix">
    <!--logo-->
    <h1 class="siteLogo"><a href="#" title="中国电信" class="siteLogo-homepage"></a><a href="#" title="商城" class="siteLogo-mallpage"></a></h1>
    <!--//logo-->
    <!--search-->
    <div class="search">
      <div class="search-area clearfix">
        <input type="text" placeholder="请输入搜索关键字" class="search-input-text" />
        <input type="button" title="搜索" class="search-input-submit" />
      </div>
      <div class="search-suggest" style="display:none;">
        <ol>
          <li class="search-suggest-key">三星<b>I9500</b></li>
          <li class="search-suggest-key">三星<b>I9501</b></li>
          <li class="search-suggest-key">三星<b>I9001</b></li>
          <li class="search-suggest-key">三星<b>I9505</b></li>
          <li class="search-suggest-key">三星<b>I9503</b></li>
        </ol>
      </div>
      <p class="search-hotkey">热门搜索：<a href="#">三星手机</a><a href="#">手机套</a><a href="#">手机电源线</a></p>
    </div>
    <!--//search-->
    <!--我的翼猫-->
    <div class="myYmall">
      <em class="icon-user"></em><a href="#">我的翼猫</a>
    </div>
    <!--//我的翼猫-->
    <!--去购物车结算-->
    <div class="to-cart">
      <dl>
        <dt>
          <span class="shop-amount">0</span>
          <em class="icon-cart"></em>
          <a href="#">去购物车结算</a>
          <span class="angle"></span>
        </dt>
        <dd style="display:none;">
          <div class="nogoods">
            购物车中还没有商品，赶紧选购吧！
          </div>
        </dd>
      </dl>
    </div>
    <!--//去购物车结算-->
    <script>
    $(function(){
	  $(".to-cart").hover(function(){
		$(this).find(".angle").addClass("down").end().find("dt").addClass("selected").end().find("dd").show();  
	  },function(){
		$(this).find(".angle").removeClass("down").end().find("dt").removeClass("selected").end().find("dd").hide();  
	  });
	  $('#img').click(function(){
		if(a%2==0){$(this).attr('src','images/open.png');}
		else{$(this).attr('src','images/closed_btn.png');}
		a++;
	});	
	});
    </script>
  </div>
  <!--//headerMain-->
  <!--headerNav-->
  <div class="headerNav">
    <div class="layout">
      <dl class="all-brands">
        <dt class="all-brands-head">
          <a href="#">全部商品分类</a>
        </dt>
        <dd class="all-brands-list" style="display:none;">
          <div class="all-brands-item">
            <h3>合约购机<i>NEW</i></h3>
            <p>
              <a href="#">三星</a>
              <a href="#">Iphone</a>
              <a href="#">小米</a>
            </p>
            <a href="#" class="more">更多</a>
          </div>
          <div class="all-brands-item">
            <h3>手机套<em>91折起</em></h3>
            <p>
              <a href="#">银联充值</a>
              <a href="#">易充值</a>
            </p>
            <a href="#" class="more">更多</a>
          </div>
          <div class="all-brands-item">
            <h3>手机配件</h3>
            <p>
              <a href="#">2000元起</a>
              <a href="#">3000元起</a>
            </p>
            <a href="#" class="more">更多</a>
          </div>
          <div class="all-brands-item">
            <h3>杯子照片<em>91折起</em></h3>
            <p>
              <a href="#">银联充值</a>
              <a href="#">易充值</a>
            </p>
            <a href="#" class="more">更多</a>
          </div>
          <div class="all-brands-item">
            <h3>优惠促销</h3>
            <p>
              <a href="#">话费服务</a>
              <a href="#">话费服务</a>
            </p>
            <a href="#" class="more">更多</a>
          </div>
        </dd>
      </dl>
      <div class="headerNav-main clearfix">
        <!--headerNav-nav-->
        <nav class="headerNav-nav">
          <ul class="clearfix">
            <li><a href="#" class="selected">首页</a></li>
            <li><a href="#">手机汇</a></li>
            <li><a href="#">聚优惠</a></li>
            <li><a href="#">商业街</a></li>
          </ul>
        </nav>
        <!--//headerNav-nav-->
      </div>
    </div>
  </div>
  <!--//headerNav-->
</header>
<!--//header-->
<!--container-->
<div class="container">
	<!--user  用户中心-->
	<div class="layout clearfix user">
    	<!--user-aside  用户侧边栏-->
    	<div class="user-aside">
        	<div class="user-list-items">
            	<h2 class="user-list-tit">个人中心</h2>
                <ul class="user-list">
                	<li class="cur"><a href="#">我的个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                </ul>
            </div>
            <div class="user-list-items">
            	<h2 class="user-list-tit">账户管理</h2>
                <ul class="user-list">
                	<li><a href="#">收货地址管理</a></li>
                    <li><a href="#">修改密码</a></li>
                </ul>
            </div>
        </div>
        <!--//user-aside-->
        <!--user-main  用户主体-->
        <div class="user-main">
        	<div class="user-info">
            	<div class="clearfix">
                	<span><img th:src="@{/static/images/user-avatar_80x80.jpg}" class="user-avatar"/></span>
                	<strong class="user-name">逛店专业户</strong>
                    <strong class="user-welcome">欢迎来到用户中心~</strong>
                </div>
            </div>
            <script>
				$(document).ready(function(){
					$('.user-avatar').mouseover(function(){
						$(this).attr('src','/static/images/user-avatar_hover_80x80.jpg');
					});
					$('.user-avatar').mouseleave(function(){
						$(this).attr('src','/static/images/user-avatar_80x80.jpg');
					});
				});
			</script>

            <!--user-about-orders  用户未支付订单-->
            <div class="user-about-items user-about-orders">
            	<div class="user-about-hd">
                	<h3 class="user-about-tit">未支付订单</h3>
                </div>
                <div class="user-about-bd">
                	<div class="user-about-box user-about-none" style="display:none;">  <!--无信息时显示-->
                    	<p>您暂时没有未支付订单，<a href="#">赶快去购物吧~</a></p>
                    </div>
                    <div class="user-about-box user-about-con">   <!--有信息时显示-->
                    	<div class="my-orders">
                        	<table class="orders-table">
                            	<tr>
                                	<td class="orders-pic-td" width="15%"><img th:src="@{/static/picture/img_big.jpg}" class="orders-pic"/></td>
                                    <td width="38%">订单号：<span class="orders-number">1140424450009291</span></td>
                                    <td width="15%"><strong class="orders-price">￥1969</strong></td>
                                    <td width="15%"><a class="orders-detail" href="#">订单详情</a></td>
                                    <td class="tc" width="17%"><a class="orange-btn buynow" href="#">立即支付</a></td>
                                </tr>
                                <tr>
                                    <td class="orders-pic-td" width="15%"><img th:src="@{/static/picture/img_big.jpg}" class="orders-pic"/></td>
                                    <td width="38%">订单号：<span class="orders-number">1140424450009291</span></td>
                                    <td width="15%"><strong class="orders-price">￥1969</strong></td>
                                    <td width="15%"><a class="orders-detail" href="#">订单详情</a></td>
                                    <td class="tc" width="17%"><a class="orange-btn buynow" href="#">立即支付</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--//user-about-orders-->
            
            <!--user-about-orders  用户已支付订单-->
            <div class="user-about-items user-about-orders">
            	<div class="user-about-hd">
                	<h3 class="user-about-tit">已支付订单</h3>
                </div>
                <div class="user-about-bd">
                	<div class="user-about-box user-about-none">  <!--无信息时显示-->
                    	<p>您暂时没有已支付订单，<a href="#">挑挑喜欢的商品去>></a></p>
                    </div>
                    <div class="user-about-box user-about-con" style="display:none;">   <!--有信息时显示-->
                    	<div class="my-orders">
                        	<table class="orders-table paid-orders-table">
                            	<tr>
                                	<td class="orders-pic-td" width="15%"><img th:src="@{/static/picture/img_big.jpg}" class="orders-pic"/></td>
                                    <td width="38%">订单号：<span class="orders-number">1140424450009291</span></td>
                                    <td width="15%"><strong class="orders-price">￥1969</strong></td>
                                    <td width="15%"><a class="orders-detail" href="#">订单详情</a></td>
                                    <td class="tc" width="17%">&nbsp;</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--//user-about-orders-->
            
            <!--user-about-cart  购物车-->
            <div class="user-about-items user-about-cart">
            	<div class="user-about-hd">
                	<h3 class="user-about-tit">购物车</h3>
                    <a class="view-cart" href="#">查看购物车>></a>
                </div>
                <div class="user-about-bd">
                	<div class="user-about-box user-about-none" style="display:none;">  <!--无信息时显示-->
                    	<p>您的购物车还是空的，<a href="#">赶快去购物吧~</a></p>
                    </div>
                    <div class="user-about-box user-about-con">   <!--有信息时显示-->
                    	<div class="my-cart">
                        	<ul class="clearfix my-cart-list">
                            	<li>
                                	<a href="#">
                                    	<img th:src="@{/static/picture/img_big.jpg}"/>
                                        <p>苹果（APPLE）iPho..</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img th:src="@{/static/picture/img_big.jpg}"/>
                                        <p>苹果（APPLE）iPho..</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--//user-about-cart-->
            
        </div>
        <!--//user-main-->
    </div>
    <!--//user-->
</div>
<!--//container-->
<!--footer-->
<footer class="footer">
  <div class="layout clearfix">
    <!--footService-->
    <div class="footer-service">
      <dl>
        <dt><em class="icon-aq"></em>购物指南</dt>
        <dd><a href="#">咨询与投诉</a></dd>
      </dl>
      <dl>
        <dt><em class="icon-service"></em>售后服务</dt>
        <dd><a href="#">七天包退</a></dd>
        <dd><a href="#">十五天包换</a></dd>
        <dd><a href="#">手机维修咨询</a></dd>
      </dl>
      <dl>
        <dt><em class="icon-pay"></em>支付方式</dt>
        <dd><a href="#">网上支付</a></dd>
      </dl>
    </div>
    <!--//footService-->
    <!--在线咨询-->
    <ul class="online">
      <li class="line1"><a href="#"></a></li>
      <li class="line2"><a href="#"></a></li>
      <li class="line3"><a href="#"></a></li>
      <li class="line4"><a href="#"></a></li>
      <li class="line5"><a href="#"></a></li>
      <li class="line6"><a href="#"></a></li>
    </ul>
    <!--在线咨询-->
  </div>
  <!--copyright-->
  <div class="footer-copyright">
    <p class="footer-nav"><a href="#">关于我们</a> | <a href="#">网厅公告</a> | <a href="#">网站使用帮助</a> | <a href="#">网站导航</a> | <a href="#">业务合作</a> | <a href="#">友情链接</a></p>
    <p class="copyright">版权所有 ©2009 中国电信集团公司 [ 增值电信业务经营许可证 A2.B1.B2-20090001 ] ICP证号京ICP备 09031924号</p>
    <s class="cr-icon"></s>
  </div>
  <!--//copyright-->
</footer>
<!--//footer-->
</body>
</html>